<script setup lang="ts">
	import { ref } from 'vue';
	const open = ref(false)
	const switchFunc = () => {
		open.value = !open.value
	}
</script>
<template>
	<view class="switch" @click="switchFunc">
		<view class="background" :class="{'background-on': open}"></view>
		<view class="round" :class="{'round-on': open}"></view>
	</view>
</template>
<style scoped lang="scss">
	.switch {
		position: relative;
		.background {
			background-color: #eaeaea;
			width: 76rpx;
			height: 36rpx;
			border-radius: 100rpx;
			transition: 0.3s ease all;
		}
		.round {
			border-radius: 100%;
			width: 30rpx;
			height: 30rpx;
			background-color: white;
			position: absolute;
			top: 3rpx;
			left: 3rpx;
		}
		.background-on {
			background-color: $primary-color;
		}
		.round-on {
			transform: translateX(40rpx);
		}
	}
</style>